<template>
  <div class="login">
    <div class="heat">
      <p>欢迎来到<span>宜家</span></p>
      <p>很高兴您来到这里</p>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="userName"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div class="toRegister">
        <router-link to="/register">没有账号，去注册</router-link>
      </div>

      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          style="background-color: #80acd1"
          font-weight="bold"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginApi } from "../../api/user";
import { setToken } from "../../utils/setCookie";
import { Toast } from "vant";

export default {
  data() {
    return {
      userName: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      loginApi(values).then((res) => {
        console.log(res);
        if (res.code === "success") {
          Toast("登录成功");
          setToken(res.token);
          //存入vuex
          this.$store.commit("saveToken", res.token);
          this.$router.push("/home");
        } else {
          Toast("请检查用户信息");
        }
      });
    },
  },
};
</script>
<style scoped>
.heat {
  width: 100%;
  height: 200px;
  background-color: #0058a3;
  padding-top: 70px;
  box-sizing: border-box;
}

.heat p {
  font-size: 25px;
  color: white;
  font-weight: bold;
  margin-left: 20px;
}
.heat p span {
  font-size: 25px;
  color: yellow;
  font-weight: bold;
}
.login .toRegister {
  text-align: center;
  margin: 16px 0;
}
</style>
